<template>
	<view class="bg-white flex" style="height: 100vh; width: 100vw;">
		<scroll-view scroll-y="true" style="height: 100%;width: 100%;">
			<cu-custom bgColor="bg-white" :isBack="true">
				<block slot="content">
					<text style="font-size: 32rpx; color: #333333; font-weight: bold;">黑名单</text>
				</block>
			</cu-custom>
			<view v-for="(user, index) in blackUserList" :key="index" class="flex justify-between align-center solid-bottom" style="padding: 24rpx 32rpx;">
				<view class="flex align-center">
					<view class="cu-avatar round" style="height: 96rpx; width: 96rpx;" :style="{'background-image':'url('+user.avatar+')'}"></view>
					<view class="flex flex-direction justify-between" style="margin-left: 16rpx;">
						<text style="font-size: 32rpx; color: #333333; font-weight: bold;">{{user.username}}</text>
						<text style="font-size: 28rpx; color: #999999;margin-top: 8rpx;">
							{{user.fanCount}}粉丝
						</text>
					</view>
				</view>
				<view @click="removeBlack(user.userId)">
					<button type="default" style="width: 140rpx;font-size: 28rpx;">
						移除
					</button>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userId: this.$store.getters.userid,
				blackUserList: [],
			}
		},
		onLoad() {
			this.$http.get('/ucenter/black/getBlackList/' + this.userId).then(res=>{
				let data = res.data;
				if(data.success) {
					this.blackUserList = data.result;
				}
			})
		},
		methods: {
			removeBlack(blackId) {
				this.$http.post('/ucenter/black/removeBlack', {
					blackId: blackId,
					userId: this.userId
				}).then(res=>{
					let data = res.data;
					if(data.success) {
						this.$tip.success("移除成功！");
						this.$Router.replace({name: 'blacklist'})
					}
				})
			}
		}
	}
</script>

<style>
</style>
